<template>
  <div class="add-form">
    <el-dialog :title="titleInfo.text+titleInfo.pageTitle" :visible.sync="dialogFormVisible">
      <el-row>
        <el-col :span="6">
          <div >【题型】:{{formBase.data.questionType==1?"单选题":"多选题"}}</div>
        </el-col>
        <el-col :span="6">
          <div >【编号】:{{formBase.data.id}}</div>
        </el-col>
        <el-col :span="6">
          <div v-if="formBase.data.difficulty==1">【难度】:简单</div>
          <div v-else-if="formBase.data.difficulty==2">【难度】:一般</div>
          <div v-else>【难度】:困难</div>
        </el-col>
        <el-col :span="6">
          <div >【标签】:{{formBase.data.tags}}</div>
        </el-col>
      </el-row>
      <el-row class="other">
        <el-col :span="6">
          <div >【学科】:{{formBase.data.subjectName}}</div>
        </el-col>
        <el-col :span="6">
          <div >【目录】:{{formBase.data.directoryName}}</div>
        </el-col>
        <el-col :span="6">
          <div >【方向】:{{formBase.data.direction}}</div>
        </el-col>
      </el-row>
      <el-row class="other">
        <el-col>
          <div >【题干】:</div>
          <div style="color:blue;margin-top:10px" v-html="formBase.data.question"></div>
          <template >
            <br>
            <div v-if="formBase.data.questionType==1">
              单选题 选项: (以下选中的选项为正确答案)
              <el-radio
              v-for="item in formBase.data.options"
              :key="item.id"
              style="margin-top:10px"
              :isRight="item.isRight"
              :value="radio"
              :label="item.id">{{item.title}}</el-radio>
            </div>
            <div v-else-if="formBase.data.questionType==2">
              多选题 选项: (以下选中的选项为正确答案)
              <el-checkbox
              v-for="item in formBase.data.options"
              :key="item.id"
              style="margin-top:10px"
              :isRight="item.isRight"
              :value="!!item.isRight"
              :label="item.id">{{item.title}}</el-checkbox>
            </div>
          </template>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px" class="other">
        <el-col>
          【参考答案】 : <el-button type="danger" @click="handleVideo()">视频答案预览</el-button>
        </el-col>
      <!-- TODO -->
        <video style="width:100px;height:100px" :src="formBase.data.videoURL" v-if="videoLoading" controls></video>
      </el-row>
      <el-row class="other">
        <el-col>
          【答案解析】 : <span v-html="formBase.data.answer"></span>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          【题目备注】 : <span>{{formBase.data.remarks}}</span>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'Ques-preview',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      radio: this.formBase.initAnsId,
      videoLoading: false,
      citySelect: {
        province: [],
        cityDate: []
      }
    }
  },
  created () {
    // console.log('video',this.formBase.data.videoURL);
  },
  computed: {
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    getList () {

    },
    handleVideo () {
      this.videoLoading = !this.videoLoading
    }
  },
  // 挂载结束

  mounted: function () {},
  // 创建完毕状态

  watch: {
    'formBase.initAnsId': function (newVal) {
      this.radio = newVal
    }
  }
  // 组件更新

}
</script>
<style>
span {
  display: inline-block;
}
.el-radio {
  display: block;
}
.el-checkbox {
  display: block;
}
.other {
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid lightgray;
}

.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: center;
}
</style>
